<template>
	<view class="template-home tn-safe-area-inset-bottom">

		<!-- 顶部自定义导航 -->
		<tn-navbar :safe-area-inset-right="true" :placeholder="true" back-icon="" home-icon="" fixed
			bg-color="#FFFFFF00" text-color="#fff">
			<text class="gl-title">{{sConf.title}}</text>
			<template #back>
				<tn-icon :name="sConf.logo" size='80' style="margin-left: 5px;"></tn-icon>
			</template>
		</tn-navbar>

		<!-- 黑色滚动背景 -->
		<view class="bg-contaniner" style="background-color: #000000;">
		</view>


		<!-- 套娃式轮播 -->
		<view class="top-contaniner">
			<swiper class="card-swiper" :circular="false" :vertical="true" :autoplay="false" :duration="500"
				:interval="5000" @change="cardSwiper">

				<!-- 纵向滚动的轮播-视频形式 -->
				<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
					<!-- 视频 -->
					<view class="swiper-item image-banner">
						<video :id="`video-${item.id}`" :src="sConf.pics + item.mp4" object-fit="cover" muted
							:mobilenet-hint-type="0" :enable-progress-gesture="false" :show-loading='false'
							:show-play-btn='false' :show-fullscreen-btn='false' :controls='false' :autoplay='true'
							:enable-play-gesture='true' :loop="true" @error="loadError"
							style="height: 100vh;width: 100vw;"></video>
					</view>
					<view class="swiper-item-icon image-banner">
						<!-- 文字 -->
						<view class="swiper-item-text">
							<view class="tn-color-white tn-text-xxl tn-text-bold tn-text-center">
								<text class="tn-padding-right-xs" :class="['tn-icon-' + item.icon]"></text>
								<text class="" style="font-size: large;">{{item.user}}</text>
							</view>
							<view
								class="tn-color-white tn-padding-top-xs tn-text-df clamp-text-2 tn-text-center tn-margin-top-sm"
								style="opacity: 0.8;">
								{{item.title}}
							</view>
						</view>
						<!-- 按钮 -->
						<view class="tn-flex go">
							<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center"
								style="justify-content: center;">
								<tn-button :plain="true" shape="round" bg-color="#FFFFFF" text-color="#FFFFFF"
									width="40vw" height="70rpx" @click="tn(item.id)">
									即刻探索
									<text class="tn-icon-right-arrow tn-padding-left-xs"></text>
								</tn-button>
							</view>
						</view>
					</view>
				</swiper-item>

				<!-- 纵向滚动的轮播 -->
				<swiper-item>
					<view class="" style="height: 100vh;width: 100vw;">
						<!-- 横向滚动的轮播-套娃 -->
						<swiper class="img-swiper tn-margin-top-lg" :circular="true" :autoplay="false" duration="500"
							interval="5000" previous-margin="60rpx" next-margin="60rpx" @change="imgSwiper">
							<swiper-item v-for="(item,index) in swiperList2" :key="index"
								:class="imgCur==index?'cur':''">
								<view class="swiper-item img-banner"
									:style="'background-image:url('+ sConf.pics + item.url + ');'">
								</view>
								<view class="swiper-item-text1 tn-color-white">
									<view class="tn-flex tn-flex-row-between">
										<view class="tn-text-xl">
											{{item.name}}
										</view>
										<view class="tn-text-right">
											<view class="">
												<!-- {{item.number}} -->
											</view>
										</view>
									</view>
								</view>
								<view class="swiper-item-text2">
									<view
										class="tn-text-sm tn-padding-top-xs tn-text-center tn-color-white clamp-text-1">
										{{item.text}}
									</view>
								</view>
								<view class="tn-flex  go2">
									<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center"
										style="justify-content: center;">
										<tn-button :plain="true" shape="round" bg-color="#FFFFFF" text-color="#FFFFFF"
											width="40vw" height="70rpx" @click="tn(item.id)">
											即刻探索
											<text class="tn-icon-right-arrow tn-padding-left-xs"></text>
										</tn-button>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</swiper-item>

			</swiper>

			<!-- 轮播提示小点点鸭-->

			<view class="indication" v-if="cardCur==3" style="display: none;">
				<block v-for="(item,index) in swiperList" :key="index">
					<view class="spot" :class="cardCur==index?'active':''"></view>
				</block>
			</view>
			<view class="indication" v-else>
				<block v-for="(item,index) in swiperList.length+1" :key="index">
					<view class="spot" :class="cardCur==index?'active':''"></view>
				</block>
			</view>

		</view>
	</view>
</template>

<script>
	import utils from '@/common/utils';
	export default {
		name: "home",
		data() {
			return {
				title: '悦君玺 • 重庆',
				sConf: getApp().globalData,
				cardCur: 0,
				imgCur: 0,
				swiperList: [],
				swiperList2: [],
			};
		},
		mounted() {
			console.log('mounted', '22222222222222');
		},
		methods: {
			loadDefData() {
				let data = {
					ordering: '-sort',
					status: 1
				}
				utils.mpIndexGoodsVideoList(this.sConf.host, data).then((res) => {
					console.log('请求成功', res);
					if (res.rescode === 200) {
						this.loadVideoData(res.resmsg);
					}
				});
				utils.mpIndexGoodsPhotoList(this.sConf.host, data).then((res) => {
					console.log('请求成功', res);
					if (res.rescode === 200) {
						this.loadPhotoData(res.resmsg);
					}
				});
			},
			loadVideoData(e) {
				console.log('loadVideoData');
				let tmpData = []
				e.forEach((item) => {
					if (item.content === null) {
						return;
					}
					if (item.video === null) {
						return;
					}
					tmpData.push({
						id: item.gid,
						type: 'image',
						url: (item.cover ?? [])[0]?.url,
						mp4: (item.video ?? [])[0]?.url,
						icon: 'con-pisces',
						user: item.content?.title,
						title: item.content?.jingle,
					});
				});
				this.swiperList = tmpData
			},
			loadPhotoData(e) {
				console.log('loadPhotoData');
				let tmpData = []
				e.forEach((item) => {
					if (item.content === null) {
						return;
					}
					tmpData.push({
						id: item.gid,
						type: 'image',
						url: (item.cover ?? [])[0]?.url,
						number: "六",
						name: item.content.title,
						text: item.content.jingle
					});
				});
				this.swiperList2 = tmpData
			},
			tn(e) {
				console.log('tn', e);
				uni.navigateTo({
					// url: '/pageb/puctplay/puctplay?puct=' + e,
					url: '/pagec/product/product?gid=' + e
				});
			},

			cardSwiper(e) {
				console.log('cardSwiper', e.detail.current);
				this.cardCur = e.detail.current;
			},

			imgSwiper(e) {
				console.log('imgSwiper', e.detail.current);
				this.imgCur = e.detail.current;
			},
			loadError(e) {
				console.log('加载视频失败', e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.template-home {
		max-height: 100vh;
	}

	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}

	/* 移动背景部分 start*/
	.bg-contaniner {
		position: fixed;
		top: -0rpx;
		left: -300rpx;
		--text-color: hsl(0 95% 60%);
		--bg-color: hsl(0 0% 100%);
		--bg-size: 200px;
		height: 100%;
		display: grid;
		place-items: center;
		place-content: center;
		overflow: hidden;
		background-color: var(--bg-color);
		z-index: -1;
	}

	.bg-contaniner::before {
		--size: 150vmax;
		content: "";
		inline-size: var(--size);
		block-size: var(--size);
		background-image: url("/static/fashion-bg-min.png");
		background-size: var(--bg-size);
		background-repeat: repeat;
		transform: rotate(45deg);
		opacity: 0.25;
		animation: bg 6s linear infinite;
	}

	@media (prefers-reduced-motion: reduce) {
		.bg-contaniner::before {
			animation-duration: 0s;
		}
	}

	@keyframes bg {
		to {
			background-position: 0 calc(var(--bg-size) * -1);
		}
	}

	/* 移动背景部分 end*/


	/* 全屏轮播  start*/
	.card-swiper {
		height: 100vh !important;
		margin-top: -4rpx;
	}

	.card-swiper swiper-item {
		width: 750rpx !important;
		left: 0rpx;
		box-sizing: border-box;
		overflow: initial;
	}

	.card-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100vh;
		border-radius: 0rpx;
		transform: scale(1);
		transition: all 0.2s ease-in 0s;
		will-change: transform;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
		will-change: transform;
	}

	.card-swiper swiper-item .swiper-item-text {
		margin-top: -680rpx;
		// margin-top: calc(-380rpx + env(safe-area-inset-bottom) / 2);
		// margin-top: calc(-380rpx + constant(safe-area-inset-bottom));
		background: none;
		width: 100%;
		display: block;
		height: 50vh;
		// border-radius: 10rpx;
		transform: translate(0rpx, 0rpx) scale(1);
		transition: all 0.6s ease 0s;
		will-change: transform;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item-text {
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
		margin-top: -680rpx;
		// margin-top: calc(-380rpx - env(safe-area-inset-bottom) / 2);
		// margin-top: calc(-380rpx - constant(safe-area-inset-bottom));
		width: 100%;
		height: 50vh;
		padding: 30rpx 10rpx 180rpx 30rpx;
		transform: translate(0rpx, 0rpx) scale(1);
		transition: all 0.6s ease 0s;
		will-change: transform;
	}


	/* 即刻探索 start*/
	.card-swiper swiper-item .go {
		z-index: 9999;
		width: 100%;
		position: fixed;
		margin: 0 auto;
		bottom: 190rpx;
		bottom: calc(210rpx + env(safe-area-inset-bottom) / 2);
		bottom: calc(210rpx + constant(safe-area-inset-bottom));
	}

	.card-swiper swiper-item.cur .go {
		z-index: 9999;
		width: 100%;
		position: fixed;
		margin: 0 auto;
		bottom: 190rpx;
		bottom: calc(210rpx + env(safe-area-inset-bottom) / 2);
		bottom: calc(210rpx + constant(safe-area-inset-bottom));
	}

	.card-swiper swiper-item .swiper-item-icon {
		// transform: translate(0rpx, 0rpx) scale(1, 1);
		transition: all 0.6s ease 0s;
		// overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item-icon {
		// transform: translate(0rpx, 0rpx) scale(1, 1);
		transition: all 0.6s ease 0s;
	}


	/* 轮播图片入口 start*/
	.img-swiper {
		height: 86vh !important;
	}

	.img-swiper swiper-item {
		width: 630rpx !important;
		box-sizing: border-box;
		padding: 0rpx 0rpx 90rpx 0rpx;
		overflow: initial;
	}

	.img-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 860rpx;
		transform: scale(0.9);
		transition: all 0.2s ease-in 0s;
		overflow: hidden;
	}

	.img-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}

	/* 即刻探索 start*/
	.img-swiper swiper-item .go2 {
		z-index: 9999;
		width: 100%;
		position: fixed;
		margin: 0 auto;
		bottom: 0rpx;
		bottom: calc(20rpx + env(safe-area-inset-bottom) / 2);
		bottom: calc(20rpx + constant(safe-area-inset-bottom));
	}

	.img-swiper swiper-item.cur .go2 {
		z-index: 9999;
		width: 100%;
		position: fixed;
		margin: 0 auto;
		bottom: 0rpx;
		bottom: calc(20rpx + env(safe-area-inset-bottom) / 2);
		bottom: calc(20rpx + constant(safe-area-inset-bottom));
	}

	.img-swiper swiper-item .swiper-item-text1 {
		margin-top: -980rpx;
		width: 80%;
		display: block;
		height: 50%;
		transform: translate(60rpx, 0rpx) scale(1);
		opacity: 0.4;
		transition: all 0.6s ease 0s;
		overflow: hidden;
	}

	.img-swiper swiper-item.cur .swiper-item-text1 {
		margin-top: -980rpx;
		margin-right: 150rpx;
		width: 100%;
		opacity: 1;
		transform: translate(0rpx, 0rpx) scale(1);
		transition: all 0.6s ease 0s;
	}

	.img-swiper swiper-item .swiper-item-text2 {
		background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
		margin-top: 220rpx;
		/* width: 83%; */
		// width: 100%;
		display: block;
		height: 140rpx;
		padding: 20rpx 30rpx 0 30rpx;
		transform: translate(0rpx, 0rpx) scale(1);
		opacity: 0;
		transition: all 0.6s ease 0s;
		overflow: hidden;
	}

	.img-swiper swiper-item.cur .swiper-item-text2 {
		// width: 100%;
		height: 140rpx;
		margin-top: 220rpx;
		padding: 20rpx 30rpx 0 30rpx;
		opacity: 1;
		transform: translate(0rpx, 0rpx) scale(1);
		transition: all 0.6s ease 0s;
	}

	.img-banner {
		margin-top: 320rpx;
		display: flex;
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: center;
		align-items: center;
		justify-content: center;
	}

	/* 轮播图片 start*/
	.pic-swiper {
		height: 67vh !important;
	}

	.pic-swiper swiper-item {
		width: 630rpx !important;
		// left: 60rpx;
		box-sizing: border-box;
		padding: 0rpx 0rpx 90rpx 0rpx;
		overflow: initial;
	}

	.pic-swiper swiper-item .pic-item {
		width: 100%;
		display: block;
		height: 100%;
		border-radius: 10rpx;
		transform: scale(0.9);
		transition: all 0.2s ease-in 0s;
		overflow: hidden;
	}

	.pic-swiper swiper-item.cur .pic-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}

	.pic-swiper swiper-item .pic-item-text {
		margin-top: -180rpx;
		width: 100%;
		display: block;
		height: 50%;
		border-radius: 10rpx;
		transform: translate(0rpx, -40rpx) scale(0.7, 0.7);
		transition: all 0.6s ease 0s;
		overflow: hidden;
	}

	.pic-swiper swiper-item.cur .pic-item-text {
		margin-top: -150rpx;
		width: 100%;
		transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
		transition: all 0.6s ease 0s;
	}


	/* 轮播指示点 start*/
	.indication {
		z-index: 9999;
		width: 100%;
		height: 36rpx;
		position: fixed;
		// display:flex;
		display: block;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		bottom: 100rpx;
	}

	.spot {
		opacity: 0.6;
		background-color: #FFF;
		opacity: 0.3;
		width: 10rpx;
		height: 10rpx;
		border-radius: 20rpx;
		margin: 20rpx 0 !important;
		left: 90vw;
		top: -340rpx;
		position: relative;
	}

	.spot.active {
		opacity: 0.4;
		height: 30rpx;
		background-color: #FFF;
	}

	/* 文字截取*/
	.clamp-text-1 {
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.clamp-text-2 {
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	/* 自定义样式 */
	.gl-title {
		font-family: YunFengchongqingbangbangti;
	}
</style>